import { Component } from "react";
import "../App.css";


class MatrixViewer extends Component{
  constructor(props){
    super(props);

    this.state={
      headLabels  : props.HeadLabels,   // 头部显示
      matrix      : props.matrix,
      maxRow      : -1,
      marCol      : -1,
      beginCol    : -1,
      endCol      : -1,
      beginRow    : -1,
      endRow      : -1,
      pageRows    : -1,   // 每页显示的行数
      currentPage : -1,   // 当前页
      pages       : 0,    // 总页数
    }

    this.handlePageChanged       = this.handlePageChanged.bind(this);
    this.handleInputValueChanged = this.handleInputValueChanged.bind(this);

  }
  
  componentDidMount(){
    if(!this.state.matrix) return;
    const pageRows = 10;
    this.updatePage(pageRows);
  }

  handlePageChanged(event){
    const currentPage = parseInt(event.target.value) - 1;
    const pageRows    = parseInt(this.state.pageRows);
    const matrix      = this.state.matrix;
    const beginRow    = currentPage * pageRows;
    let endRow        = (currentPage + 1) * pageRows;

    if(endRow > matrix.length) endRow = matrix.length;

    this.setState({
      beginRow    : beginRow,
      endRow      : endRow,
      currentPage : currentPage,
    })
  }

  handleInputValueChanged(event){
    const id    = event.target.id;
    const value = parseInt(event.target.value);

    switch(id){
      case 'pageRows' : this.updatePage(value);break;
      case 'beginRow' : this.setState({ beginRow: value});break;
      case 'endRow'   : this.setState({ endRow: value});break;
      case 'beginCol' : this.setState({ beginCol: value});break;
      case 'endCol'   : this.setState({ endCol: value});break;
      default:break;
    }
    
  }

  updatePage(pageRows){
    const rows    = this.state.matrix.length;
    const pages   = Math.ceil(rows / pageRows);
    
    if(pageRows <= 0 || pageRows > rows){
      pageRows = rows;
    }

    this.setState({
      beginRow    : 0,
      endRow      : pageRows,
      beginCol    : 0,
      endCol      : -1,
      currentPage : 0,
      pages       : pages,
      pageRows    : pageRows,
    })
  }

  _renderTableHead(){
    const matrix     = this.state.matrix;
    const headLabels = this.state.headLabels;
    let beginCol   = parseInt(this.state.beginCol);
    let endCol     = parseInt(this.state.endCol);
    if(matrix[0] instanceof Array){
      if(beginCol < 0) beginCol = 0;
      if(endCol < 0 || endCol >= matrix[0].length) endCol = matrix[0].length;
      let headMap;
      if(!headLabels){
        let head = ['-'];
        for(let i=beginCol, il=endCol; i < il; i++){
          head.push(i);
        }
        headMap = head.map((item, key)=><div key={key} className="col">{item}</div>);
      }
      else{
        headMap = headLabels.map((item, key)=><div key={key} className="col">{item}</div>);
      }
      return <div className="row">{headMap}</div>
    }
    else{
      return <div className="row"><div className="col">-</div><div className="col">{headLabels?headLabels[0]:0}</div></div>;
    }
  }

  _renderMatrix(){
    const matrix    = this.state.matrix;

    let beginRow    = parseInt(this.state.beginRow);
    let endRow      = parseInt(this.state.endRow);
    const beginCol  = parseInt(this.state.beginCol);
    const endCol    = parseInt(this.state.endCol);

    if(beginRow < 0) beginRow = 0;
    if(endRow < 0 || endRow > matrix.length) endRow = matrix.length;

    const matrixMap = matrix.slice(beginRow, endRow).map((item, key)=>{
      let startPos = beginCol;
      let endPos   = endCol;
      if(item instanceof Array){
        if(beginCol < 0) startPos = 0;
        if(endCol < 0 || endCol >= item.length) endPos = item.length;

        let slicedRow = item.slice(startPos, endPos);
        const slicedRowMap = slicedRow.map((val, key)=><div className="col" key={key}>{val}</div>);

        return <div className="row" key={key}><div className="col">{(key+beginRow).toString()}</div>{slicedRowMap}</div>;
      }
      else{
        return(
        <div className="row" key={key}>
          <div className="col">{(key+beginRow).toString()}</div>
          <div className="col">{item}</div>
        </div>
        );
      }
    });
  
    return matrixMap;
  }

  _renderPageIndex(){
    const pages = parseInt(this.state.pages);
    let pagesArray = [];
    for(let i = 0; i < pages; i++){
      pagesArray.push(i + 1);
    }
    const pagesMap = pagesArray.map((item, key)=>
      <button 
        key={key} value = {item} onClick={this.handlePageChanged} 
        style={{backgroundColor:key===this.state.currentPage?'green':''}}>
        {item}
      </button>
    );

    return pagesMap;
  }

  render(){
    return(
      <div>
        <div>
          <label>页:</label>
          <input type='number'   id='pageRows' value={this.state.pageRows} onChange={this.handleInputValueChanged}/>
          <div>
            <label>行:</label> 
            <input type='number' id='beginRow' value={this.state.beginRow} onChange={this.handleInputValueChanged}/>
            <input type='number' id='endRow'   value={this.state.endRow}   onChange={this.handleInputValueChanged}/>
          </div>
          <div>
            <label>列:</label> 
            <input type='number' id='beginCol' value={this.state.beginCol} onChange={this.handleInputValueChanged}/>
            <input type='number' id='endCol'   value={this.state.endCol}   onChange={this.handleInputValueChanged}/>
          </div>
        </div>
        {this._renderPageIndex()}        
        <div className="div-table">
          {this._renderTableHead()}
          {this._renderMatrix()}
        </div>
      </div>
    );
  }
}


export default MatrixViewer;